<template>
	<view :style="objColor">
		<customer></customer>
		<!-- homeSub/pages/terminal/pileDetail/pileDetail.wxml -->
		<navigator class="pile_head" :url="'/homeSub/pages/siteDetail/siteDetail?stationId=' + pileData.stationId"
			open-type="redirect">
			<image class="pile_img" v-if="pileData.stationImages"
				:src="pileData.stationImages.length ? pileData.stationImages[0] : 'https://oos-cn.ctyunapi.cn/front-end/static/static/pic.png'">
			</image>
			<view class="plie_box" v-if="pileData.stationName">
				<view class="plie_name">{{ pileData.stationName }}</view>
				<view class="plie_detail">{{ pileData.stationAddress }}</view>
			</view>
			<image v-if="pileData.stationName" class="img"
				src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/turn.png"></image>
		</navigator>

		<view class="plie_type">
			<view class="tit" v-if="site.pileName">{{ site.pileName || '未命名' }}</view>
			<block v-for="(item, index) in typeMenu" :key="index">
				<view :class="'nav ' + (navIndex == index ? 'activite' : '')" @tap="checkIndex" :data-index="index">
					{{ item }}
				</view>
			</block>
		</view>

		<!-- 枪列表 -->
		<view v-if="showGunList">
			<block v-if="pileList.length > 0">
				<view class="plie_list" v-for="(item, index) in pileList" :key="index">
					<view class="plie_item" @tap="goGunDetail" :data-index="item">
						<!-- <view class="status_box">
        <van-circle value="{{ item.soc }}" size='55' color="#1487FA" text="{{ item.soc }}%"  wx:if="{{item.gunState == 2}}" />
        <view class="status_item" wx:elif="{{item.gunState == 5}}">
          <view class="status_item_round">空闲</view>
        </view>
      </view> -->
						<block v-if="item.gunState == 1">
							<view class="img"></view>
							<view class="img2">空闲</view>
						</block>
						<block v-if="item.gunState == 2">
							<view class="img"></view>
							<view class="img2">充电准备</view>
						</block>
						<block v-if="item.gunState == 4">
							<view class="img"></view>
							<view class="img6">充电<br>完成</view>
						</block>
						<block v-if="item.gunState == 3">
							<!-- <van-circle :value="item.soc" size="55" color="#1487FA" class="charging"> -->
							<!--<view style="text-align: center">-->
							<!--<view>{{ item.soc }}%</view>-->
							<!--<view>{{ item.gunState == 3 ? '充电中' : '充电完成' }}</view>-->
							<!--</view>-->
							<!-- </van-circle> -->

							<!--<u-circle-progress active-color="#6DB12E"  :percent="item.soc" :width="130" :borderWidth="12">-->
							<!--<view class="u-progress-content">-->
							<!--<view class="soc">{{ item.soc }}%</view>-->
							<!--<view class='status5'>{{'充电中'}}</view>-->
							<!--</view>-->
							<!--</u-circle-progress>-->

							<l-echart ref="constituteCanvas2" style="width: 130rpx;height: 130rpx;"></l-echart>
						</block>
						<block v-if="item.gunState == 5">
							<view class="status"></view>
							<view class="status3">离线</view>
						</block>
						<block v-if="item.gunState == 6">
							<view class="status"></view>
							<view class="status3">充电锁定</view>
						</block>
						<block v-if="item.gunState == 7">
							<view class="status"></view>
							<view class="status3">故障</view>
						</block>
						<block v-if="item.gunState == 8">
							<view class="img"></view>
							<view class="img2">预约</view>
						</block>
						<block v-if="item.gunState == 9">
							<view class="status"></view>
							<view class="status3">禁用</view>
						</block>
						<block v-if="item.gunState == 255">
							<view class="status"></view>
							<view class="status3">默认</view>
						</block>



						<!-- 831 ui处理这里的box -->
						<view class="item item_box">
							<view class="item_name">
								<text>{{ item.gunName }}</text>
								<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/slow.png"
									v-if="item.powerMode === 1"></image>
								<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/fast.png"
									v-else-if="item.powerMode === 2"></image>
								<image class="item_img" src="https://oos-cn.ctyunapi.cn/front-end/static/static/exceed.png"
									v-else-if="item.powerMode === 3"></image>
							</view>

							<view class="max_power">
								<text>最大功率：{{ item.ratedPower }}kw</text>
							</view>

							<!-- 831价格展示 -->
							<view class="price_view">
								<!-- 先判断 是否有专享价 -->
								<view class="total_view yyy" v-if="item.nowPrice.exclusiveDiscount">
									<!-- 只有专享价 -->
									<view class="zxj_view zxj">
										<!-- <view class="current_view">
                                            <text class="v_text_current">
                                                ¥<text class="current_t">{{ item.nowPrice.sweepPriceStr }}</text>
                                            </text>
                                        </view> -->
										<view class="img_view_831_bg">
											<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
												mode="scaleToFill" />
											<view class="v_text">
												<text>
													¥{{ item.nowPrice.exclusivePriceStr }}
												</text>
											</view>
										</view>
									</view>
								</view>
								<view class="total_view www" v-else>

									<template>
										<view class="zxj_view zdyh_dkh">
											<view class="current_view">
												<text class="v_text_current">
													¥<text
														class="current_t">{{ item.nowPrice.discount ? item.nowPrice.currentPriceStr : item.nowPrice.sweepPriceStr }}</text>
												</text>
											</view>
											<!-- 划线价展示：站点优惠 || 成长会员折扣 || 大客户价 -->
											<!-- 23.11.22 付费会员不显示划线价 -->
											<view class="hxj_view"
												v-if="item.nowPrice.discount || item.nowPrice.growthleDiscount || item.nowPrice.contractDiscount">
												<text class="v_text">
													¥{{ item.nowPrice.sweepPriceStr }}
												</text>
											</view>
											<!-- 大客户价展示条件 -->
											<view class="img_view_831_bg" v-if="item.nowPrice.contractDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.nowPrice.contractPriceStr }}
													</text>
												</view>
											</view>
											<!-- 成长会员价展示 -->
											<view class="img_view_831_bg" v-if="item.nowPrice.growthleDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.nowPrice.growthlePriceStr }}
													</text>
												</view>
											</view>
											<!-- 付费会员价展示 -->
											<view class="img_view_831_bg" v-if="item.nowPrice.payleDiscount">
												<image class="v_icon"
													src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
													mode="scaleToFill" />
												<view class="v_text">
													<text>
														¥{{ item.nowPrice.paylePriceStr }}
													</text>
												</view>
											</view>
										</view>
									</template>
								</view>
							</view>

						</view>

					</view>

					<!-- <view class="priceDetail" @tap="pricePopupVisible" data-type="open" :data-gunid="item.gunid">点击查看价格详情</view> -->


					<view class="next_box">
						<view class="time_view" v-if="!item.nextStagePrice.allDayPriceUnifyFlag">
							下个时间段：{{item.nextStagePrice.currentStartTime || '--' }}-{{item.nextStagePrice.currentEndTime || ''}},
							<template v-if="item.nextStagePrice.exclusiveDiscount">
								<text class="t_text"
									v-if="item.nextStagePrice.exclusiveDiscount">{{ item.nextStagePrice.exclusivePriceStr }}元/度</text>
							</template>
							<template v-if="!item.nextStagePrice.exclusiveDiscount">
								<text class="t_text"
									v-if="item.nextStagePrice.discount">{{ item.nextStagePrice.currentPriceStr }}元/度</text>
								<text class="t_text"
									v-if="!item.nextStagePrice.discount">{{ item.nextStagePrice.sweepPriceStr }}元/度</text>
							</template>
						</view>
						<view class="time_view" v-else>
							全天价格统一
						</view>
						<view class="del_view" @tap="pricePopupVisible" data-type="open" :data-gunid="item.gunid">
							价格详情 >
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<Upgrading text="暂无数据"></Upgrading>
			</block>
		</view>

		<!-- <uni-popup :show="showPrice" ref="showPrice" type="bottom" position="bottom" @close="pricePopupVisible($event, { type: 'close' })" data-type="close" custom-class="price_popup">
            <view class="priceList">
                <view class="priceItem" v-for="(item, index) in priceList" :key="item.price_list">
                    <view class="priceTop">
                        <view class="first">
                            <image class="price_img" :src="item.stageIcon"></image>
                            <view class="txt">{{ item.timeStr }}</view>
                            <image class="price_current" v-if="item.nowPowerPrice" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/current.png"></image>
                        </view>
                        <view class="txt1">
                            <text class="txt2">¥</text>
                            {{ item.totalPrice }}
                            <text class="txt3">元/度</text>
                        </view>
                    </view>

                    <view class="servePrice">{{ item.powerprice }}</view>
                </view>
            </view>
        </uni-popup> -->

		<u-popup round='25' :show="showPrice" mode="bottom" position="bottom" @close="closePricePopupVisible"
			data-type="close" custom-class="price_popup">
			<view class="box-info">
				<view class="title">电价收费详情</view>
				<view class="t1"><text>收费时段</text><text>费用(元/度) = 电费 + 服务费</text></view>

				<!-- 831价格收费详情抽离组件 -->
				<priceDetailView :itemData="gunDetail.powerStageDetail"></priceDetailView>


			</view>

		</u-popup>

	</view>
</template>

<script>
	'use strict';
	import Upgrading from '@/components/upgrading/upgrading';
	import * as echarts from 'echartsPages/static/js/echarts.js'
	import lEchart from '../../../components/lime-echart/components/l-echart/l-echart'
	// exports.__esModule = true; // homeSub/pages/terminal/pileDetail/pileDetail.ts

	// 电价收费详情
	import priceDetailView from '../../../../components/priceDetailView/pileDetailView.vue'

	var https_1 = require('./../../../../api/https.js');

	export default {
		components: {
			Upgrading,
			lEchart,
			priceDetailView,
		},
		data() {
			return {
				stationId: 0,
				typeMenu: ['全部', '空闲'],
				navIndex: 0,
				showPrice: false,

				site: {
					pileName: ''
				},

				pileData: {
					stationId: '',
					stationIcon: false,
					stationName: '',
					stationAddress: ''
				},

				pileList: [],
				allPileList: [],
				pileList2: [],
				priceList: [],
				pileNo: '',
				gunNo: '',
				showGunList: false,
				gunDetail: {},
				guns: [{
						value: 0,
						name: 'A'
					},
					{
						value: 1,
						name: 'B'
					},
					{
						value: 2,
						name: 'C'
					},
					{
						value: 3,
						name: 'D'
					},
					{
						value: 4,
						name: 'E'
					},
					{
						value: 5,
						name: 'F'
					},
					{
						value: 6,
						name: 'G'
					},
					{
						value: 7,
						name: 'H'
					},
					{
						value: 8,
						name: 'I'
					},
					{
						value: 9,
						name: 'J'
					},
					{
						value: 10,
						name: 'K'
					},
					{
						value: 11,
						name: 'L'
					},
					{
						value: 12,
						name: 'M'
					},
					{
						value: 13,
						name: 'N'
					},
					{
						value: 14,
						name: 'O'
					},
					{
						value: 15,
						name: 'P'
					},
					{
						value: 16,
						name: 'Q'
					},
					{
						value: 17,
						name: 'R'
					},
					{
						value: 18,
						name: 'S'
					},
					{
						value: 19,
						name: 'T'
					},
					{
						value: 20,
						name: 'U'
					},
					{
						value: 21,
						name: 'V'
					},
					{
						value: 22,
						name: 'W'
					},
					{
						value: 23,
						name: 'X'
					},
					{
						value: 24,
						name: 'Y'
					},
					{
						value: 25,
						name: 'Z'
					}
				],

				dataShow: false,
				tips: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this;
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.pileNo = options.pileNo
			this.options = options
		},

		onShow() {
			//速电通单独传参
			if (this.options.codeSellerType == 'sudiantong') {
				this.codeSellerType = 'sudiantong'
				this.getDtoByNoFnSudiantong(this.options)
			} else {
				this.codeSellerType = ''
				this.getDtoByNoFn(this.options)
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getDtoByNoFn(options) {
				let that = this
				https_1.getPileDTOByNo({
						pileNo: options.pileNo,
						sellerId: getApp().globalData.sellerId
					})
					.then((res) => {
						console.log(res, 'getDtoByNoFn==>res....')
						if (res.code == 0) {
							console.log('stationStatus站点-经营状态==>', res.data?.stationData?.stationStatus)
                        	console.log('pileData桩信息==>', res.data?.pileData)

							// let stationStatus = res.data?.stationData?.stationStatus
							// if (stationStatus === 0 || stationStatus === 3 || stationStatus === 4) {
							// 	uni.redirectTo({
							// 		url: '/homeSub/pages/terminal/fault/fault?pileNo=' + that.pileNo + '&stationStatus=' +
							// 			stationStatus
							// 	});
							// 	return false
							// }

							var pileList2 = res.data.gunDTOList.filter(function(item) {
								return item.gunState == 1;
							});
							var gunDTOList = res.data.gunDTOList.map(function(item) {
								item.electPrice = (item.electPrice / 100).toFixed(2);
								item.nextStageBalance = (item.nextStageBalance / 100).toFixed(2);

								if (!item.gunName) {
									item.gunName = that.guns[item.gunno].name + '枪';
								}

								return item;
							});
							this.stationId = res.data.stationId
							that.pileData = res.data.stationData,
								that.site = res.data.pileData,
								that.pileList = gunDTOList,
								that.allPileList = res.data.gunDTOList,
								that.pileList2 = pileList2
							that.showGunList = true
							setTimeout(function() {
								that.initEchart()
								uni.hideLoading();
							}, 500);
						}
						// 该二维码暂不支持,请重新扫描充电桩上其它二维码 50014 || 桩未上线投运 50015 || 站点未上线 50016
						else if (res.code == 50014 || res.code == 50015 || res.code == 50016) {
							uni.redirectTo({
								url: '/homeSub/pages/terminal/fault/fault0131?pileText=' + res.msg
							});
						}
						else {
							uni.showToast({
								title: res.msg,
								icon: 'error',
								duration: 2000
							});
						}
					});
			},
			//速电通传值修改
			getDtoByNoFnSudiantong(options) {
				console.log(options, '------------速电通拉')
				https_1.getPileDTOByNo({
					pileNo: '',
					qrCode: '',
					connectorID: options.pileNo,
					sellerId: getApp().globalData.sellerId
				}).then((res) => {

					if (res.code == 0) {

						var pileList2 = res.data.gunDTOList.filter(function(item) {
							return item.gunState == 1;
						});
						var gunDTOList = res.data.gunDTOList.map(function(item) {
							item.electPrice = (item.electPrice / 100).toFixed(2);
							item.nextStageBalance = (item.nextStageBalance / 100).toFixed(2);

							if (!item.gunName) {
								item.gunName = that.guns[item.gunno].name + '枪';
							}

							return item;
						});

						this.pileData = res.data.stationData,
							this.site = res.data.pileData,
							this.pileList = gunDTOList,
							this.allPileList = res.data.gunDTOList,
							this.pileList2 = pileList2
						this.showGunList = true

						setTimeout(() => {
							this.initEchart()
							uni.hideLoading();
						}, 500)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});
					}
				})
			},
			initEchart() {
				this.$nextTick(() => {
					let arr = this.pileList.filter(item => item.gunState == 3)
					arr.forEach((item, index) => {
						this.$refs.constituteCanvas2[index].init(echarts, chart => {
							echarts.dispose();
						});
						let option = {
							title: {
								text: item.soc + '%\n充电中',
								left: 'center',
								top: '28%',
								textStyle: {
									color: this.objColor2.textColor,
									fontSize: 12,
									fontWeight: '400'
								}
								// bottom:'0'
							},
							series: [{
								//第一张圆环
								type: 'pie',
								radius: ['80%', '100%'],
								center: ['50%', '50%'],
								// 隐藏指示线
								labelLine: {
									show: false
								},
								//隐藏圆环上文字
								label: {
									show: false
								},
								data: [
									//value当前进度 + 颜色
									{
										value: item.soc,
										itemStyle: {
											normal: {
												color: '#6DB12E'
											}
										}
									},
									{
										value: 100 - item.soc,
										itemStyle: {
											normal: {
												color: '#ececec'
											}
										}
									}
								]
							}]
						};
						this.$refs.constituteCanvas2[index].init(echarts, chart => {
							chart.setOption(option);
						});
					})
				})
			},
			//tab栏
			checkIndex: function(e) {
				var index = e.currentTarget.dataset.index;
				this.navIndex = index,
					this.pileList = index === 0 ? this.allPileList : this.pileList2
			},
			//获取站点详情(查询枪最低价格信息)
			getStationGunPriceDetail: function(gunId) {
				var that = this;
				let getApiUrl = uni.getStorageSync('token') ? https_1.getStationGunDetails : https_1
					.getStationGunDetailsNotAuth
				getApiUrl(gunId).then((res) => {
					if (res.code == 0) {
						this.gunDetail = res.data || {};
						that.showPrice = true
					}
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000,
					})
				})
			},

			//价格弹窗
			pricePopupVisible: function(e, _dataset) {
				/* ---处理dataset begin--- */
				this.datasetHandle(e, _dataset);
				/* ---处理dataset end--- */
				var that = this;
				var type = e.currentTarget.dataset.type;
				var gunid = e.currentTarget.dataset.gunid;
				if (type === 'open') {
					this.getStationGunPriceDetail(gunid);
					// https_1
					//     .queryElectPriceDatil({
					//         stationId: that.pileData.stationId,
					//         gunId: gunid
					//     })
					//     .then(function (res) {
					//         var pileList = res.data.Pilelist;
					//
					//         if (pileList.length === 0) {
					//             that.dataShow=false,
					//                 that.tips='\u6682\u65E0\u6570\u636E~'
					//             return;
					//         }
					//
					//         var priceList = [];
					//         pileList.forEach(function (pile) {
					//             pile.chargingStage.forEach(function (item, index) {
					//                 if (index === pile.chargingStage.length - 1) {
					//                     item.timeStr = item.time + '-24:00';
					//                 } else {
					//                     item.timeStr = item.time + '-' + pile.chargingStage[index + 1].time;
					//                 }
					//
					//                 item.powerprice = item.powerprice.replace(/:/g, '：').replace(',', ' | ');
					//                 item.stageText = that.jfpg(item.stageEnum).text;
					//                 item.stageStyle = that.jfpg(item.stageEnum).style;
					//                 item.stageIcon = that.jfpg(item.stageEnum).icon;
					//                 item.totalPrice = that.calculation(item.powerprice);
					//                 priceList.push(item);
					//             });
					//         });
					//         that.priceList=priceList
					//             that.showPrice=true
					//     });
				} else {
					this.showPrice = false
				}
			},

			closePricePopupVisible() {
				this.showPrice = false
			},
			// 尖峰平谷
			jfpg: function(jfpg) {
				var text = '';
				var style = '';
				var icon = '';
				switch (jfpg) {
					case 'Jian':
						text = '尖';
						style = 'jian';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/tip.png';
						break;

					case 'Feng':
						text = '峰';
						style = 'feng';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/peak.png';
						break;

					case 'Ping':
						text = '平';
						style = 'ping';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/flat.png';
						break;

					case 'Gu':
						text = '谷';
						style = 'gu';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/valley.png';
						break;

					default:
						break;
				}

				return {
					text: text,
					style: style,
					icon: icon
				};
			},

			// 计算总价
			calculation: function(str) {
				var numArr = str.match(/\d+\.?\d*/g) || [];
				var totalPrice = 0;
				numArr.forEach(function(item) {
					totalPrice += Number(item);
				});
				return totalPrice.toFixed(4);
			},

			//枪详情
			goGunDetail: function(e) {
				var status = e.currentTarget.dataset.index.gunState; // console.log(e.currentTarget.dataset.index)
				// if(status==3||status==4){
				//   querMemberStatus().then((res:any)=>{
				//     if (res.code == 0) {
				//       if (res.data.ifCharging) {
				//         if(res.data.billList[0].gunNo === e.currentTarget.dataset.index.gunno){
				//           wx.navigateTo({
				//             url: `../../../../homeSub/pages/power/power?busId=${res.data.billList[0].busId}&pileNo=${this.data.pileNo}&gunNo=${e.currentTarget.dataset.index.gunno}`
				//           })
				//         }else{
				//           wx.showModal({
				//             title: '提示',
				//             content: `该枪充电中`,
				//             showCancel: false
				//          })
				//         }
				//       }else{
				//         wx.showModal({
				//           title: '提示',
				//           content: `该枪充电中`,
				//           showCancel: false
				//        })
				//       }
				//     }
				//   })
				// }else

				if (status == 7 || status == 3 || status == 5 || status == 6) {
					uni.navigateTo({
						url: '/homeSub/pages/terminal/fault/fault?pileNo=' + this.pileNo + '&gunid=' + e.currentTarget.dataset
							.index.gunid + '&status=' + status
					});
				} else {
					if (this.codeSellerType == 'sudiantong') {
						wx.navigateTo({
							url: '/homeSub/pages/terminal/gunDetail/gunDetail?status=' + status +
								'&codeSellerType=sudiantong&pileNo=-1&gunNo=-1' + "&connectorID=" + this.pileNo + '&stationId=' +
								this.stationId
						})
					} else {
						uni.navigateTo({
							url: '/homeSub/pages/terminal/gunDetail/gunDetail?status=' + status + '&pileNo=' + this.pileNo +
								'&gunNo=' + e.currentTarget.dataset.index.gunno + '&stationId=' + this.stationId
						});
					}

				}
			}
		}
	};
</script>
<style lang="less" scoped>
	// 831样式
	@import url('./pileDetail-discount.less');

	/* homeSub/pages/terminal/pileDetail/pileDetail.wxss */
	/*颜色*/
	/*数字*/
	/*文字溢出隐藏*/
	/*固定布局*/
	/* grid是（布局 */
	/*宽高*/
	/* 字体大小*/
	/* 行高 */
	/* 圆角 */
	/* 外边距 */
	/* 内边距 */
	/* 实边框 */
	/* 虚边框 */
	/* 定位  */
	/* 数组  */
	.record-in .aaa1 {
		color: #909399;
	}

	.record-in .aaa2 {
		color: var(--textColor);
	}

	.record-in .aaa3 {
		color: #f7a14a;
	}

	.record-in .aaa4 {
		color: #72c23d;
	}

	.record-in .aaa5 {
		color: #606266;
	}

	.u-progress-content {

		.soc,
		.status5 {
			font-size: 20rpx;
			text-align: center;
			color: var(--textColor);
		}
	}

	page {
		background-color: #f5f7fa;
		padding-bottom: 100rpx;
	}

	.pile_head {
		margin: 16rpx 24rpx 16rpx 24rpx;
		align-items: center;
		padding: 40rpx 32rpx 40rpx 32rpx;
		display: flex;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.pile_head .pile_img {
		width: 140rpx;
		height: 120rpx;
	}

	.pile_head .plie_box {
		width: 408rpx;
		margin: 18rpx 39rpx 17rpx 33rpx;
	}

	.pile_head .plie_box .plie_name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
	}

	.pile_head .plie_box .plie_detail {
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin-top: 29rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}

	.pile_head .img {
		width: 16rpx;
		height: 27rpx;
	}

	.plie_type {
		display: flex;
		align-items: center;
		margin: 32rpx 0rpx 32rpx 57rpx;
	}

	.plie_type .tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
		margin-right: 34rpx;
	}

	.plie_type .nav {
		width: 180rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 12rpx 0 12rpx;
		background: #fff;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}

	.plie_type .activite {
		background: rgba(20, 135, 250, 0.06);
		border: 1rpx solid var(--textColor);
		font-family: PingFang SC;
		font-weight: bold;
		color: var(--textColor);
	}

	.plie_list {
		width: 638rpx;
		min-height: 268rpx;
		background: linear-gradient(0deg, #fff, #f4f6f8);
		border: 2rpx solid #fff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 16rpx 24rpx 16rpx 24rpx;
		// padding: 44rpx 28rpx 29rpx 28rpx;
		padding: 44rpx 28rpx 0rpx 28rpx;
	}

	.plie_list .plie_item {
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #dcdfe6;
	}

	.plie_list .plie_item .img {
		width: 110rpx;
		height: 110rpx;
		background: #fff;
		border: 3rpx solid var(--textColor);
		opacity: 0.06;
		border-radius: 50%;
	}

	.plie_list .plie_item .img2,
	.img6 {
		width: 98rpx;
		height: 98rpx;
		background: rgba(20, 135, 250, 0.06);
		border-radius: 50%;
		position: absolute;
		line-height: 98rpx;
		margin-left: 9rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: var(--textColor);
	}

	.img6 {
		background: rgba(121, 132, 197, 0.16);
		color: rgba(121, 132, 197);
		box-sizing: border-box;
		padding-top: 20rpx;
		line-height: 30rpx;
	}

	.plie_list .plie_item .status {
		width: 111rpx;
		height: 111rpx;
		background: #fff;
		border: 7rpx solid #909399;
		opacity: 0.06;
		border-radius: 50%;
	}

	.plie_list .plie_item .status3 {
		width: 100rpx;
		height: 100rpx;
		background: rgba(144, 147, 153, 0.06);
		border-radius: 50%;
		position: absolute;
		margin-left: 13rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #909399;
	}

	.plie_list .plie_item .item {
		margin: 0 10rpx;
		flex: 1;
	}

	.plie_list .plie_item .item_name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
		display: flex;
		align-items: center;
	}

	.plie_list .plie_item .item_name .item_img {
		width: 44rpx;
		height: 34rpx;
		margin-left: 33rpx;
	}

	.plie_list .plie_item .item_info {
		margin: 30rpx 0 30rpx 0;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #606266;
	}

	.plie_list .plie_item .item_info .price {
		color: #fc724c;
	}

	.plie_list .plie_item .nextInfo {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909399;
	}

	.plie_list .turn_img {
		width: 16rpx;
		height: 27rpx;
	}

	.plie_list .priceDetail {
		padding-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: var(--textColor);
	}

	.empty {
		text-align: center;
		margin-top: 180rpx;
		font-size: 26rpx;
		color: #909399;
	}

	.priceList {
		padding: 0rpx 34rpx 0rpx 34rpx;
		height: 700rpx;
		overflow: auto;
	}

	.priceList .priceItem {
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #dcdfe6;
		margin-top: 40rpx;
	}

	.priceList .priceItem .priceTop {
		display: flex;
		justify-content: space-between;
	}

	.priceList .priceItem .priceTop .first {
		display: flex;
		align-items: center;
	}

	.priceList .priceItem .priceTop .first .txt {
		font-size: 30rpx;
		margin: 0 32rpx 0 15rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #1a1a1a;
	}

	.priceList .priceItem .priceTop .first .price_img {
		width: 39rpx;
		height: 31rpx;
	}

	.priceList .priceItem .priceTop .first .price_current {
		width: 56rpx;
		height: 32rpx;
	}

	.priceList .priceItem .priceTop .txt1 {
		color: #fc724c;
		font-size: 32rpx;
		font-family: DIN;
		font-weight: bold;
	}

	.priceList .priceItem .priceTop .txt2 {
		font-size: 22rpx;
		font-family: PingFangSC;
		font-weight: 500;
	}

	.priceList .priceItem .priceTop .txt3 {
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: Medium;
	}

	.priceList .priceItem .servePrice {
		font-size: 26rpx;
		padding-top: 31rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #606266;
	}

	.price_popup {
		width: 702rpx !important;
		height: 691rpx;
		margin: 0 24rpx 26rpx 24rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
	}

	.box-info {
		width: 680rpx;
		height: 580rpx;
		padding: 40rpx 32rpx;
		margin: 0 auto;
		overflow: auto;
		position: relative;
		padding-top: 0;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #303133;
			position: fixed;
			z-index: 10;
			background-color: #fff;
			width: 93%;
			height: 100rpx;
			line-height: 100rpx;

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 36rpx;
				left: -15rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: #6DB12E;
				z-index: 2;
			}
		}

		&>.t1 {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303133;
			margin-bottom: 24rpx;
			margin-top: 32rpx;
			padding-top: 80rpx;
		}

		.list {
			.item {
				/*width: 654rpx;*/
				padding: 40rpx 32rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				background: #F5F7FA;
				margin-bottom: 16rpx;
				align-items: center;

				&:last-of-type {
					margin-bottom: 0;
				}

				.time {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #303133;
				}

				&>.t1 {
					width: 80rpx;
					height: 38rpx;
					display: none;
					background: #FC724C;
					border-radius: 17rpx 17rpx 0px 17rpx;
					color: #F5F7FA;
					text-align: center;
					line-height: 38rpx;
					font-size: 20rpx;
					position: absolute;
					top: 40rpx;
					left: 220rpx;
					z-index: 1;
				}

				&>.t2 {
					width: 110rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					display: none;
					background: #FC724C;
					border-radius: 0px 20rpx 20rpx 0px;
					color: #fff;
					font-size: 26rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.t2.active,
				.t1.active {
					display: block;
				}

				.right-item {

					.type1,
					.type2 {
						font-size: 26rpx;
						font-weight: 500;
						color: #606266;

						.l1 {
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								margin-left: 20rpx;
							}
						}

						.t2 {
							font-size: 32rpx;
							font-weight: bold;
							color: var(--textColor);
						}

						.delete {
							font-size: 26rpx;
							font-weight: 400;
							text-decoration: line-through;
							color: #909399;
							margin-top: 30rpx;

							text {
								margin-left: 20rpx;
							}
						}

						&>text {
							margin-left: 20rpx;
						}
					}

					.type2 {
						.t1 {
							font-size: 32rpx;
							font-weight: bold;
							color: var(--textColor);
						}
					}
				}

			}

			.item.active {
				background: rgba(252, 114, 76, 0.08);
			}
		}
	}




	.yh_wrap {
		display: flex;
	}

	.yhimg_box {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 8rpx;
		position: relative;

		.discount_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.vip_text {
			position: absolute;
			top: 40%;
			left: 55%;
			transform: translate(-50%, -50%);
			font-size: 16rpx;
			font-family: DIN-BlackItalic;
			font-weight: 600;
			// font-style:italic;
			color: #A65424;
		}
	}
</style>